<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意见反馈列表 - 见闻间后台管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
    <script src="/install/js/vue2.6.11.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>
    <script src="/install/js/axios.min.js"></script>
    <style>
        .app-container { padding: 20px; }
        .filter-container { margin-bottom: 16px; display: flex; gap: 16px; flex-wrap: wrap; }
        .table-actions { display: flex; gap: 8px; }
    </style>
</head>
<body>
    <div id="app" class="app-container">
        <el-card>
            <div slot="header" class="clearfix">
                <span>意见反馈列表</span>
            </div>

            <div class="filter-container">
                <el-select v-model="filter.scene" placeholder="反馈场景">
                    <el-option value="" label="全部"></el-option>
                    <el-option value="0" label="功能异常"></el-option>
                    <el-option value="1" label="产品建议"></el-option>
                    <el-option value="2" label="违规举报"></el-option>
                </el-select>

                <el-select v-model="filter.status" placeholder="处理状态">
                    <el-option value="" label="全部"></el-option>
                    <el-option value="0" label="待处理"></el-option>
                    <el-option value="1" label="已采纳"></el-option>
                    <el-option value="2" label="已忽略"></el-option>
                </el-select>

                <el-button type="primary" @click="fetchList">查询</el-button>
                <el-button @click="resetFilter">重置</el-button>
            </div>

            <el-table :data="tableData" border v-loading="loading">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="user_id" label="用户ID"></el-table-column>
                <el-table-column label="反馈场景" width="120">
                    <template slot-scope="scope">
                        <el-tag :type="sceneTypeMap[scope.row.scene].type">
                            {{ sceneTypeMap[scope.row.scene].label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="反馈内容" show-overflow-tooltip></el-table-column>
                <el-table-column label="相关截图" width="100">
                    <template slot-scope="scope">
                        <el-button 
                            type="text"
                            @click="viewImages(scope.row.images)"
                            v-if="scope.row.images"
                        >
                            查看
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                        <el-tag :type="statusMap[scope.row.status].type">
                            {{ statusMap[scope.row.status].label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="提交时间" width="180"></el-table-column>
                <el-table-column label="操作" width="160" fixed="right">
                    <template slot-scope="scope">
                        <div class="table-actions">
                            <el-button 
                                type="text"
                                @click="handleView(scope.row.id)"
                            >
                                查看
                            </el-button>
                            <el-button 
                                type="primary"
                                size="small"
                                @click="handleProcess(scope.row.id)"
                                v-if="scope.row.status === 0"
                            >
                                处理
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.current"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pagination.size"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                ></el-pagination>
            </div>
        </el-card>

        <!-- 图片预览弹窗 -->
        <el-dialog :visible.sync="dialogVisible" :modal="false" width="80%">
            <el-image-viewer :url-list="imageUrls"></el-image-viewer>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    loading: false,
                    filter: {
                        scene: '',
                        status: ''
                    },
                    pagination: {
                        current: 1,
                        size: 10,
                        total: 0
                    },
                    sceneTypeMap: {
                        '0': { label: '功能异常', type: 'danger' },
                        '1': { label: '产品建议', type: 'success' },
                        '2': { label: '违规举报', type: 'warning' }
                    },
                    statusMap: {
                        '0': { label: '待处理', type: 'warning' },
                        '1': { label: '已采纳', type: 'success' },
                        '2': { label: '已忽略', type: 'info' }
                    },
                    dialogVisible: false,
                    imageUrls: []
                };
            },
            created() {
                this.fetchList();
            },
            methods: {
                fetchList() {
                    this.loading = true;
                    const params = {
                        page: this.pagination.current,
                        limit: this.pagination.size,
                        scene: this.filter.scene,
                        status: this.filter.status
                    };

                    axios.get('/admin/science.feedback/list', { params })
                        .then(response => {
                            if (response.data.code === 200) {
                                this.tableData = response.data.data.list;
                                this.pagination.total = response.data.data.total;
                            }
                        })
                        .catch(error => {
                            this.$message.error('获取数据失败');
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                },
                resetFilter() {
                    this.filter = {
                        scene: '',
                        status: ''
                    };
                },
                handleSizeChange(size) {
                    this.pagination.size = size;
                    this.fetchList();
                },
                handleCurrentChange(current) {
                    this.pagination.current = current;
                    this.fetchList();
                },
                handleView(id) {
                    window.location.href = `/admin/science.feedback/create?id=${id}&view=true`;
                },
                handleProcess(id) {
                    window.location.href = `/admin/science.feedback/create?id=${id}`;
                },
                viewImages(images) {
                    this.imageUrls = images.split(',');
                    this.dialogVisible = true;
                }
            }
        });
    </script>
</body>
</html>